<template>
	<!-- 月历滚动插件 -->
	<view class="statistic_month">
		<!-- 月历顶部信息 -->
		<view class="month_info">
			<picker mode="date" :value="selectedDate" fields="month" @change="bindDateChange">
				<text class="uni-month__header-text month__header-year">{{ getAssignDateInfo(false, 0) }}</text>
				<text class="uni-month__header-text month__header-month">{{ getAssignDateInfo(false, 1) }}月</text>
			</picker>
			<text v-show="showBackToTodayBtn" class="backToToday" :style="{ color: dateActiveColor }"
				@tap="goToCurrentMonth()">回到本月</text>
		</view>
		<!-- 月历轮播 -->
		<view class="month_swiper">
			<swiper key="normalSwiper" circular :style="{ height: swiperHeight }" :current="current"
				:duration="duration" :skip-hidden-item-layout="true" @change="e => current = e.detail.current"
				@transition="swiperTransition" @animationfinish="swiperTransitionFinish">
				<swiper-item v-for="(swiper, swiperIndex) in 3" :key="swiperIndex" class="swiper-item">
					<monthBox :cellHeight="cellHeight" :startMonth="monthDateCache[swiperIndex].firstMonth"
						:dateActiveColor="dateActiveColor" :textActiveColor="textActiveColor"
						:selectedDate="selectedDate"
						:currentDate="getAssignDateInfo(true, 0) + '-' + getAssignDateInfo(true, 1)"
						:showActive="showActive" @chooseDate="chooseDate">
					</monthBox>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import {
	parseTime
} from './js/utils.js'
import monthBox from './monthBox.vue'
export default {
	name: "statistic-month",
	components: {
		monthBox
	},
	props: {
		duration: { // 轮播图动画时长
			type: Number,
			default: 300
		},
		cellHeight: { // 一列的高度
			type: Number,
			default: 75
		},
		dateActiveColor: { // 日期选中颜色
			type: String,
			default: '#fff',
		},
		textActiveColor: { // 日期选中文字颜色
			type: String,
			default: '#FFFFFF'
		},
		defaultSelectedDate: { // 默认选中日期
			type: String | null,
			default: null
		},
	},
	data() {
		return {
			today: parseTime(new Date(), '{y}-{m}'), // 今天日期
			current: 1, // 当前轮播默认显示索引
			selectedDate: null, // 选中日期
			showActive: true,
			monthDateCache: []
		};
	},
	computed: {
		/* 获取指定日期信息
		isToday: 是否获取当天的信息还是选中日期的信息
		index: 0 表示年份 1 表示月份 2 表示日期 */
		getAssignDateInfo() {
			return (isToday, index) => {
				return (isToday ? this.today : this.selectedDate).split('-')[index] * 1
			}
		},
		// 返回轮播图高度
		swiperHeight() {
			const shrinkHeight = this.cellHeight + 20 + 'rpx'
			return shrinkHeight;
		},
		// 是否显示回到本月按钮
		showBackToTodayBtn() {
			return this.getAssignDateInfo(true, 0) !== this.getAssignDateInfo(false, 0) || this.getAssignDateInfo(true, 1) !== this.getAssignDateInfo(false, 1);
		},
	},
	created() {
		this.init() // 初始化数据
	},
	watch: {
		// 轮播切换
		current(newV, oldV) {
			if (newV === 0 && oldV === 2) { // 右滑
				this.swiperChange(1)
				return
			}
			if (newV === 2 && oldV === 0) { // 左滑
				this.swiperChange(-1)
				return
			}
			if (newV > oldV) { // 右滑
				this.swiperChange(1)
			} else { // 左滑
				this.swiperChange(-1)
			}
		},
	},
	methods: {
		// 初始化数据，缓存当前月和邻月/年的数据
		init() {
			if (this.selectedDate === null) { // 默认选中日期为当天
				this.selectedDate = this.defaultSelectedDate || this.today
			}
			this.generateMonthDateCache(this.getAssignDateInfo(true, 0), this.getAssignDateInfo(true, 1))
		},
		/* picker选择年月 */
		bindDateChange(e) {
			const value = e.detail.value
			this.selectedDate = value;
			this.generateMonthDateCache(this.getAssignDateInfo(false, 0), this.getAssignDateInfo(false, 1))
		},
		/* 选中日期事件 */
		chooseDate(e) {
			this.selectedDate = parseTime(new Date(e.split('-')[0], e.split('-')[1] - 1), '{y}-{m}');
			this.emitDate();
		},
		// 回到本月事件
		goToCurrentMonth() {
			this.selectedDate = parseTime(new Date(this.getAssignDateInfo(true, 0), this.getAssignDateInfo(true, 1) - 1), '{y}-{m}');
			this.generateMonthDateCache(this.getAssignDateInfo(true, 0), this.getAssignDateInfo(true, 1))
		},
		// 轮播图切换结束
		swiperChange(e) {
			this.getstartMonthOfYear(e)
		},
		//轮播滑动中触发，取消展示高亮
		swiperTransition(e) {
			if (e.detail.dx != 0) {
				this.showActive = false;
			}
		},
		//轮播结束时触发，默认选中每张轮播的第一个月
		swiperTransitionFinish(e) {
			if (!this.showActive) {
				this.showActive = true;
			}
		},
		// 获取年月的起始月份
		getstartMonthOfYear(type) {
			let startYear, startMonth;
			if (type == 1) {
				startMonth = this.getAssignDateInfo(false, 1) + (type) * 6 > 12 ? 1 : 7;
				startYear = this.getAssignDateInfo(false, 1) + (type) * 6 > 12 ? this.getAssignDateInfo(false,
					0) + 1 : this.getAssignDateInfo(false, 0);
			} else if (type == -1) {
				startMonth = this.getAssignDateInfo(false, 1) + (type) * 6 < 1 ? 7 : 1;
				startYear = this.getAssignDateInfo(false, 1) + (type) * 6 < 1 ? this.getAssignDateInfo(false, 0) -
					1 : this.getAssignDateInfo(false, 0);
			}
			this.selectedDate = parseTime(new Date(startYear, startMonth - 1), '{y}-{m}');
			this.generateMonthDateCache(startYear, startMonth)
		},
		// 根据current自动对轮播数据进行衔接排序
		adjacentSortByCurrent(prev, cur, next) {
			let newArr
			if (this.current === 0) {
				newArr = [cur, next, prev]
			} else if (this.current === 1) {
				newArr = [prev, cur, next]
			} else if (this.current === 2) {
				newArr = [next, prev, cur]
			}
			return newArr
		},
		//对邻月/年进行缓存数据，做相邻月/年份数据衔接
		generateMonthDateCache(year, month) {
			year = Number(year)
			month = Number(month)
			let arry = [];  			 //缓存月份数据
			let SM = month < 7 ? 1 : 7;  //起始月份
			arry.push({					 //prev
				year: SM === 7 ? year : year - 1,
				firstMonth: SM === 7 ? 1 : 7
			}, {							 //cur
				year: year,
				firstMonth: SM
			}, {							 //next	
				year: SM === 7 ? year + 1 : year,
				firstMonth: SM === 7 ? 1 : 7
			})
			const [prev, cur, next] = arry
			let newArry = this.adjacentSortByCurrent(prev, cur, next)
			this.monthDateCache = newArry;
			this.emitDate();
		},
		// 向父组件传递当前选中数据
		emitDate() {
			const e = {
				selectedDate: parseTime(new Date(this.getAssignDateInfo(false, 0), this.getAssignDateInfo(false, 1) - 1), '{y}-{m}'),
			}
			this.$emit('change', e)
		},
	}
}
</script>

<style lang="scss">
.statistic_month {
	width: 100%;
	// padding: 20rpx 0;
	box-sizing: border-box;
	background-color: $uni-bg-color;
}

.month_swiper {
	border-bottom: 1px solid #F2F2F2;
	margin: 0 35rpx;
}

/* 月历顶部信息 */
.month_info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	padding-left: 50rpx;
	height: 34rpx;
}

.month_info .backToToday {
	margin-left: auto;
	font-size: 22rpx;
	border-radius: 21rpx;
	background-color: $uni-color-primary;
	padding: 10rpx 20rpx;
}

/* 月历顶部信息 */

/* piker选择年月 */

.uni-month__header-text {
	font-weight: 500;
	font-size: 24rpx;
	color: #333;
}

.month__header-year {
	padding-right: 8rpx;
	border-right: 1px solid #F2F2F2;
}

.month__header-month {
	padding-left: 8rpx;
}

/* piker选择年月 */
</style>